<style>
    .article-article {
        display: block;
        width: 100%;
        position: relative;
        padding-top: 10px;
    }

    .article-article > img {
        width: 96%;
        margin: 0 auto;
        display: block;
        border-radius: 10px;
    }

    .article-article > p {
        position: absolute;
        padding-left: 4%;
        display: block;
        z-index: 10;
        width: 86%;
        margin: 0 auto;
        bottom: 10px;
        color: white;
        word-break: break-all;
    }

</style>

<template>
    <div class="article-article" >
        <img :src="article.img" />
        <p>{{ article.title }}</p>
    </div>
</template>

<script>
    import XButton from 'vux-components/X-button'
    var $ = require('jquery');

    export default {
        props: ['item'],
        data: () => ({article: {} }),
        events: {
            'text-input-change': function() {
                this.refresh_wall();
            }
        },
        methods: {
            refresh_wall () {
                let model_id;
                if (this.item.record && this.item.record.model_id > 0) {
                    model_id = this.item.record.model_id;
                } else if (this.item.value) {
                    model_id = JSON.parse(this.item.value).model_id;
                } else {
                  return;
                }

                $.when($.get('/editor/article/get_desc', {article_id: model_id})).then((results) => {
                    this.article = JSON.parse(results);
                });
            },
        },
        ready() {
            this.refresh_wall();
        },
    }
</script>
